<template>
  <div class="business">
    <div class="panel-search-top">
      <div class="form">
        <el-form ref="form" :inline="true" label-width="0px" size="mini">
          <el-form-item>
            <el-input placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="button-group-operate">
        <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button>
        <el-button icon="el-icon-editor" @click="handleAdd(1) ">编辑</el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
        <el-button icon="el-icon-import" @click="dialogInport=true">导入</el-button>
        <el-button icon="el-icon-export" @click="dialogExport=true">导出</el-button>
      </div>
    </div>

    <div class="pagecontent">
      <div class="panel">
        <div class="panel-con">
          <el-table :data="json.portraitC1">
            <el-table-column prop="c1" label="序号"></el-table-column>
            <el-table-column prop="c2" label="规则ID"></el-table-column>
            <el-table-column prop="c3" label="名称"></el-table-column>
            <el-table-column prop="c1" label="级别"></el-table-column>
            <el-table-column prop="c2" label="对象"></el-table-column>
            <el-table-column prop="c3" label="指标"></el-table-column>
            <el-table-column prop="c1" label="告警值"></el-table-column>
            <el-table-column prop="c1" label="预警值"></el-table-column>
            <el-table-column prop="c3" label="发送策略" width="100"></el-table-column>
            <el-table-column prop="c3" label="状态" width="150">
              <template slot-scope="scope">
                <el-radio-group value="2">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="2">未启用</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column prop="c4" label="操作" width="86">
              <template slot-scope="scope">
                <a class="table-edit" @click="handleAdd(1)"></a>
                <a class="table-delete" @click="dialogDelete=true" href="#"></a>
              </template>
            </el-table-column>
          </el-table>
          <div class="compage">
            <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="`${dialogAddTitle}发送策略`" width="750px" :visible.sync="dialogAddSend">
      <div class="dialogpanel">
        <div class="dialogpanel-title">
          发送设置
        </div>
        <div class="dialogpanel-con">
          <el-form ref="form" label-width="170px" label-position="right" size="mini">
            <el-form-item label="ID">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item class="frequency" label="发送频率">
              <el-radio label="实时"></el-radio>
              <el-radio label=""></el-radio>每<input />分钟
            </el-form-item>
            <el-form-item label="发送时间">
              <div style="width:200px;float:left">
                <el-input></el-input>
              </div>
              <a href="#" class="help"></a>
            </el-form-item>

            <el-form-item label="接收人">
              <el-transfer filterable :filter-method="filterMethod" :titles="['已有联系人', '已选联系人']" filter-placeholder="请输入" v-model="contact2" :data="contact">
              </el-transfer>

            </el-form-item>

            <el-form-item class="buttonlist">
              <el-button type="primary">确定</el-button>
              <el-button @click="dialogAddSend = false">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </el-dialog>

    <el-dialog :title="`${dialogAddTitle}告警规则`" width="1000px" :visible.sync="dialogAddRule">
      <el-form ref="addForm" :model="dialogAddForm" :rules="rules" label-width="100px" label-position="right" size="mini">
        <div class="dialogpanel">
          <div class="dialogpanel-title">
            基本信息
          </div>
          <div class="dialogpanel-con">
            <el-form-item label="ID" prop="id">
              <el-input v-model.number="dialogAddForm.id"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="名称">
              <el-input v-model="dialogAddForm.name"></el-input>
            </el-form-item>
            <el-form-item label="级别">
              <el-select placeholder="级别" value="">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
              <a href="#" class="help"></a>
            </el-form-item>
          </div>
        </div>
        <div class="dialogpanel">
          <div class="dialogpanel-title">
            告警设置
          </div>
          <div class="dialogpanel-con">
            <el-form-item label="告警对象">
              <el-select placeholder="告警对象" value="">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="告警指标">
              <el-select placeholder="告警指标" value="">
                <el-option label="选择1" value="1"></el-option>
                <el-option label="选择2" value="2"></el-option>
              </el-select>
              <a href="#" class="help"></a>
              <div class="parallel-wrap">
                <el-checkbox>手动设置</el-checkbox>
                <a class="add" @click="addShoudongAlert">添加</a>
                <div class="parallel" v-for="(sitem,index) in dialogAddForm.shoudong">
                  <el-select placeholder="CPU利用率" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>

                  <el-select placeholder="统计周期1分钟" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>

                  <el-select placeholder="大于" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>
                  <el-form-item style="display:inline-block;" :prop="'shoudong.' + index + '.baifenshu'" :rules="rules2" label="" label-size="0">
                    <el-input type="text" v-model="sitem.baifenshu" suffix="%"></el-input>
                  </el-form-item>
                  <el-select placeholder="持续一个周期" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>

                  <el-select placeholder="每一天警告一次" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>
                  <!-- <a href="#" class="help"></a> -->
                  <a @click="deleteItem(dialogAddForm.shoudong,index)">X</a>
                </div>
              </div>
              <div class="parallel-wrap">
                <el-checkbox>自动告警</el-checkbox>
                <a class="add" @click="addAutoAlert">添加</a>
                <div class="parallel" v-for="(value,index) in dialogAddForm.zidong">
                  <el-select placeholder="磁盘只读" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>

                  <el-select placeholder="不重复" value="">
                    <el-option label="选择1" value="1"></el-option>
                    <el-option label="选择2" value="2"></el-option>
                  </el-select>
                  <a @click="deleteItem(dialogAddForm.zidong,index)">X</a>
                </div>
              </div>

            </el-form-item>
            <el-form-item label="预警值" prop="yujing">
              <el-input type="text" v-model="dialogAddForm.yujing" suffix="%"></el-input>
            </el-form-item>
            <el-form-item label="发送方式">
              <el-radio-group>
                <el-radio :label="3">邮件</el-radio>
                <el-radio :label="6">短信</el-radio>
                <el-radio :label="9">微信</el-radio>
                <el-radio :label="9">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="告警内容" style="position:">
              <el-select v-model="value10" multiple filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <div role="tooltip" id="el-popover-2947" aria-hidden="false" class="el-popover el-popper" 
              :style="`width: 200px; position: fixed; top: 533px; left: 123px; transform-origin: center top; z-index: 2009;display:${select1?'block':'none'}`"
               tabindex="0" x-placement="bottom">
                <div class="el-popover__title">标题</div>
                告警时间：告警时间 <br data-v-706cc85c="">业务系统：111 <br data-v-706cc85c="">组件：222 <br data-v-706cc85c="">告警项： 333<br data-v-706cc85c="">告警值： 444
                <div x-arrow="" class="popper__arrow" style="left: 92.5px;"></div>
              </div> -->

              <!-- <el-popover ref="popover2" :value="select1" placement="bottom" title="标题" width="200">
                告警时间：告警时间 <br/>业务系统：111 <br/>组件：222 <br/>告警项： 333<br/>告警值： 444
              </el-popover> -->
              <!-- <el-autocomplete popper-class="my-autocomplete" v-model="template1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                <i class="el-input__icon" slot="suffix" @click="handleIconClick">
                </i>
                <template slot-scope="props">
                  告警时间：{{ props.item.c1 }} <br/>业务系统：{{ props.item.c2 }} <br/>组件： {{ props.item.c3 }} <br/>告警项： {{ props.item.c4 }} <br/>告警值： {{ props.item.c5 }}
                </template>
              </el-autocomplete> -->
              <a href="#" class="help"></a>
            </el-form-item>
            <el-form-item label="预警内容">
              <el-select v-model="value10" multiple filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-popover ref="popover3" :value="select2" placement="bottom" title="标题" width="200">
                告警时间：告警时间 <br/>业务系统：111 <br/>组件：222 <br/>告警项： 333<br/>告警值： 444
              </el-popover> -->

              <!-- <el-autocomplete popper-class="my-autocomplete" v-model="template2" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                <i class="el-input__icon" slot="suffix" @click="handleIconClick">
                </i>
                <template slot-scope="props">
                  告警时间：{{ props.item.c1 }} <br/>业务系统：{{ props.item.c2 }} <br/>组件： {{ props.item.c3 }} <br/>告警项： {{ props.item.c4 }} <br/>告警值： {{ props.item.c5 }}
                </template>
              </el-autocomplete> -->
              <a href="#" class="help"></a>
            </el-form-item>
            <el-form-item class="buttonlist base-dialog-bom-btn-c">
              <el-button @click="dialogAddSubmit('addForm')" type="primary">确定</el-button>
              <el-button @click="dialogAddRule = false">取消</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="请选择导入文件" width="650px" :visible.sync="dialogInport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="文件">
          <el-select placeholder="请选择文件">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogInport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogExport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Data from "../data/index";
import common from "../assets/common";

export default {
  name: "businessAlert",
  data() {
    var checkpercent = (rule, value, callback) => {
      let reg = /\d+%$/;
      if (value.indexOf("%") > -1) {
        if (!reg.test(value)) {
          callback(new Error("格式错误"));
        }
      } else {
        if (!/\d{1,}$/.test(value)) {
          callback(new Error("格式错误"));
        }
      }
    };
    const generateData2 = _ => {
      const data = [];
      const cities = ["上海", "北京", "广州", "深圳", "南京", "西安", "成都"];
      const pinyin = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "nanjing",
        "xian",
        "chengdu"
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      rules2: [
        {
          required: true,
          message: "不能为空",
          trigger: "blur"
        },
        { validator: checkpercent, trigger: "blur" }
      ],
      rules: {
        id: [
          { required: true, message: "不能为空" },
          { type: "number", message: "必须为数字值" }
        ],
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message:
              "长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符",
            trigger: "blur"
          }
        ],
        yujing: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          },
          { validator: checkpercent, trigger: "blur" }
        ]
      },
      dialogAddForm: {
        id: "",
        name: "",
        ip: "",
        desc: "",
        shoudong: [{ baifenshu: "" }],
        zidong: [{}],
        yujing: ""
      },
      options5: [
        {
          value: "HTML",
          label: "HTML"
        },
        {
          value: "CSS",
          label: "CSS"
        },
        {
          value: "JavaScript",
          label: "JavaScript"
        }
      ],
      value10: [],
      dialogAddTitle: "",
      select1: null,
      select2: null,
      dialogAddRule: false,
      dialogAddSend: false,
      dialogInport: false,
      dialogAdd: false,
      dialogDelete: false,
      dialogSave: false,
      dialogExport: false,
      contact: generateData2(),
      contact2: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      template: [{ c1: "1", c2: "2", c3: "3", c4: 4 }],
      template1: "",
      template2: "",
      json: {
        portraitC1: Data.portraitC1
      }
    };
  },
  components: {},
  mounted() {},
  methods: {
    addShoudongAlert() {
      this.dialogAddForm.shoudong.push({ baifenshu: "" });
    },
    addAutoAlert() {
      this.dialogAddForm.zidong.push({});
    },
    dialogAddSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        }); 
    },
    handleAdd(command) {
      // if (command == "rule") {
      this.dialogAddRule = true;
      // } else if (command == "send") {
      //   this.dialogAddSend = true;
      // }
    },
    inputBlur(type, val) {
      if (type == 1) {
        common.check.isId(val);
      } else if (type == 2) {
        common.check.isNameLength3_10(val);
      } else if (type == 3) {
        common.check.isIp(val);
      }
    },
    deleteItem(val, index) {
      val.splice(index, 1);
    },
    handleEdit(command) {
      // if (command == "rule") {
      this.dialogAddRule = true;
      // } else if (command == "send") {
      //   this.dialogAddSend = true;
      // }
    },
    querySearch(queryString, cb) {
      var template = this.template;
      var results = queryString
        ? template.filter(this.createFilter(queryString))
        : template;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return template => {
        return (
          template.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  }
};
</script>

<style lang="scss" >
@import url(../assets/css/base.css);
.el-dialog__body .el-input--mini .el-input__inner {
  width: 206px;
}
.el-dialog__body{
  .parallel {
  .el-input--mini{
     width: 126px !important;
  }
  .el-input--mini .el-input__inner {
    width: 126px !important;
    margin-right: 10px;
    padding-left: 6px;
    padding-right: 20px;
  }
  }
}
.parallel {
  
  .el-select--mini:nth-child(3) .el-input--mini .el-input__inner {
    width: 66px;
    padding-left: 6px;
  }
  .el-input:nth-child(4) {
    width: 68px;
    margin-right: 10px;
  }
  .el-input:nth-child(4) .el-input__inner {
    width: 68px;
    padding-left: 6px;
    display: inline-block;
  }
  .el-input__suffix {
    right: 10px;
  }
}
</style>
 
<style scoped lang="scss">
.parallel-wrap {
  margin-top: 10px;
  a.add {
    color: rgba(63, 134, 255, 1);
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    &::before {
      content: "";
      width: 16px;
      height: 16px;
      background: url(../assets/add_icon.png) no-repeat center center;
      position: absolute;
      left: 0px;
      top: 3px;
    }
  }
}
.dialogpanel {
  .dialogpanel-title {
    font-size: 14px;
    color: rgba(51, 51, 51, 1);
    margin-left: 22px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
  }
  .dialogpanel-con {
    padding-top: 15px;
  }
}
.button-group-operate {
  float: right;
  .el-button {
    margin-left: 10px;
  }
}
.form {
  float: left;
}
.appright {
  background: #fff;
}
.pagecontent {
  padding: 20px;
}

.frequency {
  .el-form-item__content {
    .el-radio:nth-child(2) {
      margin-right: 0px;
    }
  }
  input {
    border: none;
    width: 40px;
    border-bottom: 1px solid rgba(102, 102, 102, 1);
  }
}
</style>
